<template>
  <div>{{ $store.state.counter }}</div>
  <div>{{ counter }}</div>
  <p>counter={{ $store.getters.getCounter }}</p>
  <p>{{ getCounter }}</p>
  <button @click="add">增加</button>
  <button @click="addAsysncClickHandle">异步增加</button>
  <div class="input-container">
    <div class="input-wrapper">
      <input
        type="text"
        v-model="question"
        placeholder="请输入内容"
        @focus="isFocused = true"
        @blur="isFocused = false"
      />
    </div>
    <button class="send-button" @click="chat">
      发送
    </button>
  </div>
  <div>答案：</div>
  <div>{{ answer }}</div>
  <div>历史记录：</div>
  <div>{{history}}</div>
  <div v-for="item in A">
    {{ item.message }}
  </div>
  <el-upload class="upload-demo" action=""
                     :on-change="upload"
                     :auto-upload="false"
                     :show-file-list="false"
                     :before-upload="beforeUpload"
                     :file-list="fileList"
                     :limit="3"
                   >
            <el-button style="color: white; border-radius: 30px;height: 30px;background: linear-gradient(90deg,#3cadeb,#9c88ff);">上传附件</el-button>
          </el-upload>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
// const { mapState,mapGetters ,mapMutations,mapActions}=createNamespacedHelpers('global')

// import api from "../api/index"

export default {
  data() {
    return {
      inputText: '',
      isFocused: false,
      answer:"",
      question:"",
      fileList:[
        // {
        //   name:"444",
        //   status:"成功",
        //   size:11122
        // }
      ],
      A:[
        {
          message:"112"
        },
        {
          message:"334"
        }
      ]
    };
  },
  methods: {
    // ...mapMutations(["undateHistory"]),
    // ...mapActions(["asyncAddCounter"]),
    sendMessage() {
      // 在这里处理发送逻辑
      console.log('发送消息: ' + this.inputText);
    },
  },
};
</script>

<style>
.container {
  position: relative; /* 设置容器为相对定位，使得内容和侧边栏可以相对定位 */
}

.sidebar {
  position: absolute; /* 设置侧边栏为绝对定位，使其脱离文档流 */
  top: 0;
  left: 0;
  height: 100%; /* 设置侧边栏的高度为100% */
  width: 50px; /* 设置侧边栏的默认宽度 */
  background-color: rgba(0, 0, 255, 0.5); /* 设置侧边栏的默认背景色，蓝色透明 */
  transition: all 0.3s ease; /* 添加动画过渡效果 */
  z-index: 999; /* 将侧边栏的层级设置为最高，使其覆盖在内容之上 */
}

.sidebar.open {
  width: 200px; /* 设置侧边栏打开时的宽度 */
  height: 100vh;
  background-color: aqua;
}

.content {
  padding-left: 50px; /* 设置内容部分的左边距，留出侧边栏的宽度 */
  width: 100vw;
  height: 100vh;
  background-color: black;
  text-align: left;
}
</style> -->

<template>
  <div class="container">
    <div class="sidebar" :class="{ open: sidebarOpen }" @click="toggleSidebar">打开</div>
    <div class="content">
      此处是页面的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sidebarOpen: false,
    };
  },
  methods: {
    toggleSidebar() {
      this.sidebarOpen = !this.sidebarOpen; // 切换侧边栏的打开/关闭状态
    },
  //   async upload(file){
  //     console.log('upload:', file);
  //     console.log('raw:', file.raw);
  //     let formData = new FormData();
  //     formData.append('file', file.raw);
  //     formData.append('knowledge_base_id', "kb1");
  //     const params =formData;
  //     const response = await api.uploadFile(params);
  //     console.log("filelist",this.fileList,"file",file)
        
  //       // 处理登录成功后的逻辑
  //       console.log("成功",response);
  //   },
  //   async chat() {
  //     try {
  //       const params = {
  //         question: this.question,
  //         history: this.history
  //       };

  //       // 调用api中的登录接口
  //       const response = await api.chat(params);
        
  //       // 处理登录成功后的逻辑
  //       console.log("成功",response);
  //       this.answer=response.response;
  //       this.undateHistory(response.history);

  //     } catch (error) {
  //       // 处理登录失败后的逻辑
  //       console.error("报错",error);
  //     }
  //   }

  // },
  // //专门来读取vuex的数据
  // computed:{
  //   ...mapState(["counter","history"]),
  //   ...mapGetters(["getCounter"])
  // },
  // mounted() {
  //   // console.log(1);
  //   // api.chat(
  //   //   {
  //   //     "question": "身份证怎么补办",
  //   //     "history": []
  //   //   }
  //   // ).then(res =>{
  //   //   console.log("拿到数据：")
  //   //   console.log(res);
  //   // })
  }
};
</script>

<style scoped>
.input-container {
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 5px;
}

.input-wrapper {
  flex: 1;
  overflow: hidden;
}

.input-wrapper input {
  border: none;
  outline: none;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
}

.send-button {
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  padding: 5px;
}
</style>